<template>
  <div class="files">
    <el-empty v-if="fileList.length === 0" :image-size="250"> </el-empty>
    <el-card
      class="file-list-container"
      shadow="hover"
      v-for="item in fileList"
    >
      <div class="file-list">
        <div class="header file-flex">
          <span>
            <span class="title" v-html="item.title" @click="details(item)">
            </span>
            <span
              class="code"
              v-html="item.fileCode"
              @click="details(item)"
            ></span>
          </span>
          <span class="tag" v-html="item.categoryName"></span>
        </div>
        <div class="content">
          <p
            v-if="getFileCate(item.path) === 'office'"
            class="file-content"
            v-html="item.fileContent && item.fileContent.substring(0, 256)"
          ></p>
        </div>
        <div class="file-footer file-flex">
          <div class="user-info">
            <!-- <el-avatar v-if="item.avatar" :src="baseURL + item.avatar" />
            <el-avatar v-else /> -->
            <span>
              <span class="name">{{ item.createUserBy }}</span>
              <el-divider
                direction="vertical"
                border-style="dashed"
                v-if="item.createUserBy && item.createTime"
              />
              <span>{{ item.createTime.split(' ')[0] }}</span>
            </span>
            <span class="action">
              <el-button link @click="moveFile(item)">移动</el-button>
              <el-button link @click="quoteFile(item)" style="margin-left: -5px"
                >引用</el-button
              >
            </span>
          </div>
          <div class="file-info">
            <span>
              <el-icon><View /></el-icon>
              {{ item.readNum }}
            </span>
            <span>
              <el-icon><download /></el-icon>{{ item.downloadNum }}
            </span>
            <span>
              <el-icon><Star /></el-icon>{{ item.collectNum }}
            </span>
          </div>
        </div>
      </div>
      <div v-if="item.lock === 1" class="lock" @click="view(item)">
        <el-icon><lock /></el-icon>
      </div>
    </el-card>
    <fileAction
      v-if="approvalOpen"
      :open="approvalOpen"
      :type="actionType"
      :currentFile="currentFile"
      @submit="editSubmit"
      @close="editClose"
      @apply="apply"
    ></fileAction>
  </div>
</template>

<script setup name="fileList">
import { downloadFile } from '@/api/fileManager'
import fileAction from './fileAction.vue'
import { getFileCate } from '../index.js'
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const router = useRouter()
const baseURL = import.meta.env.VITE_APP_BASE_API
const props = defineProps({
  fileList: {
    type: Array,
    default: () => {
      return []
    },
  },
})
const currentFile = ref({})
let approvalOpen = ref(false)
const actionType = ref(1)
function view(item) {
  proxy.$message.warning('您没有预览该文档权限，请联系管理员！')
  //emits('view', item)
}
function moveFile(item) {
  actionType.value = 1
  currentFile.value = item
  approvalOpen.value = true
}
function quoteFile(item) {
  actionType.value = 2
  currentFile.value = item
  approvalOpen.value = true
}
function apply() {
  approvalOpen.value = true
}

function editClose() {
  approvalOpen.value = false
}

function editSubmit(val) {
  approvalOpen.value = false
  emits('submit', val)
}

/* function _downloadFile(item) {
  downloadFile(item.id)
} */
function details(obj) {
  console.log(obj)
  router.push({
    path: '/fileManager/fileview/' + obj.id,
    query: {
      view: 1,
      active: '/fileManager/documentConsult',
      mainId: obj.mainId,
    },
  })
}
</script>
<style lang="scss">
.files {
  .el-card {
    position: relative;
    .file-list {
      em {
        background: yellow;
        color: red;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
:deep(.el-button--default) {
  border-color: #fff !important;
}
:deep(.el-card__body) {
  padding: 20px 20px 10px 20px;
}
.file-list-container:not(:first-child) {
  margin-top: 10px;
}
.file-list-container {
  .content {
    min-height: 20px;
  }

  .action {
    margin-left: 10px;
  }
  .lock {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(204, 204, 204, 0.4);
    cursor: pointer;
    .el-icon {
      font-size: 50px;
      color: #6a6a6a;
    }
  }
  :deep(.el-button--info) {
    color: #6a6a6a;
  }
  .header {
    .title,
    .code {
      color: #409eff;
    }
    .title:hover,
    .code:hover {
      cursor: pointer;
    }
    .code {
      margin-left: 30px;
    }
    .tag {
      color: #ccc;
      font-size: 14px;
    }
  }
  .file-list {
    padding-right: 3px;
    .file-flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 6px;
    }
    .file-content {
      word-break: break-all;
      color: #ccc;
      min-height: 15px;
    }
  }
  .file-footer {
    .user-info {
      display: flex;
      align-items: center;
      color: #727272;
      // .name {
      //   margin-left: 5px;
      // }
    }
    .file-info {
      display: flex;
      > span {
        margin-left: 10px;
        color: #ccc;
        align-items: center;
        display: flex;
        flex-direction: row;
        .el-icon {
          margin-right: 2px;
        }
      }
    }
  }
}
</style>
